<template>
  <div class="blog">
    <myNav></myNav>
    <div class="top">
      <site-title :fontSize="2"></site-title>
      <div class="content">
        <preview></preview>
      </div>
    </div>
    <div class="bottom">
      <myFooter></myFooter>
    </div>
  </div>
</template>
<script>
import siteTitle from "@components/siteTitle";
import myFooter from "@components/footer";
import preview from "./preview";
import myNav from "@components/nav";
export default {
  name: 'blog',
  components: {
    siteTitle,
    myFooter,
    myNav,
    preview,
  },
  mounted(){

  },
}
</script>
<style lang="less" scoped>
.blog {
  text-align: left;
  .top {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    padding-top: 5vh;
    height: calc(100vh - 6rem);
    overflow-y: scroll;
    .content {
      height: calc(85vh - 6rem);
    }
  }
  .bottom {
    height: 6rem;
  }
}
</style>


